<template>
  <view class="mine-wrapper">
    <view class="mine-bg"></view>
    <view class="content-bg">
      <userInfoView
        :info="userInfo.appUser || {}"
        :is-cloud-adopt="userInfo.isCloudAdopt"
        :benefit-count="userInfo.benefitCount"
        :cloud-adopt-count="userInfo.cloudAdoptCount"
      ></userInfoView>
      <cloudAdoptCat
        :adopt-cat-list="adoptCatList"
        @refreshAdopt="refreshAdopt()"
      ></cloudAdoptCat>
      <feedRecord :feed-pet="feedPet"></feedRecord>
      <!--#ifdef MP-WEIXIN-->
      <customerService></customerService>
      <!--#endif-->
      <!--#ifdef MP-TOUTIAO-->
      <button
        type="primary"
        open-type="im"
        :data-im-id="CUSTOMER_SERVICE.TT_IM"
        style="
          margin: 0;
          background-color: transparent;
          border-color: transparent;
          padding: 0rpx !important;
        "
        @im="ttIm"
      >
        <customerService></customerService>
      </button>
      <!--#endif-->
      <view
        v-if="isLogin"
        class="exit-button"
        @click="exit"
      >
        退出登录
      </view>
      <!-- <mayaLoginBtn
        v-if="!isLogin"
        btn-style="borderRadius:16rpx"
      ></mayaLoginBtn> -->
    </view>
  </view>
</template>
<script>
import userInfoView from './components/userInfoView.vue';
import cloudAdoptCat from './components/cloudAdoptCat.vue';
import feedRecord from './components/feedRecord.vue';
import customerService from './components/customerService.vue';
// import mayaLoginBtn from '@/components/maya-login-btn.vue';
import { getMyCloudAdoptPet, getFeedPets } from '@/api/mine.js';
import { userExitLogin } from '@/api/common.js';
import { mapGetters, mapMutations } from 'vuex';
import { CUSTOMER_SERVICE } from '@/const/index.js';
export default {
  components: {
    userInfoView,
    cloudAdoptCat,
    feedRecord,
    customerService,
    // mayaLoginBtn,
  },
  data() {
    return {
      CUSTOMER_SERVICE,
      feedPet: {},
      adoptCatList: [],
      sharePetInfo: {},
    };
  },

  computed: {
    ...mapGetters(['isLogin', 'token', 'userInfo']),
  },
  watch: {
    token(val) {
      console.log('token', this.isLogin, val);

      if (val) {
        // this.getUserInfo();
        this.getMyCloudAdoptPet();
        this.getFeedPets();
      }
    },
  },

  mounted() {
    if (this.isLogin) {
      // this.getUserInfo();
      this.getMyCloudAdoptPet();
      this.getFeedPets();
    }
    uni.$on('adoptSuccess', () => {
      if (this.isLogin) {
        this.getMyCloudAdoptPet();
      }
    });
  },
  beforeUnmount() {
    uni.$off('adoptSuccess');
  },
  methods: {
    ...mapMutations(['logout']),
    //认养刷新
    refreshAdopt(data) {
      this.sharePetInfo = data;
      this.getMyCloudAdoptPet();
    },
    //个人信息
    // getUserInfo() {
    //   const that = this;
    //   getUserInfo().then((res) => {
    //     if (res.code === 0) {
    //       that.userInfo = res.data;
    //     }
    //   });
    // },
    //云养宠物
    getMyCloudAdoptPet() {
      const that = this;
      getMyCloudAdoptPet().then((res) => {
        if (res.code === 0) {
          that.adoptCatList = res.data;
        }
      });
    },
    //投喂记录
    getFeedPets() {
      const that = this;
      getFeedPets().then((res) => {
        that.feedPet = res.data;
      });
    },
    exit() {
      const that = this;
      uni.showModal({
        title: '提示',
        content: '确认退出登录？',
        confirmText: '退出',
        success: async (res) => {
          if (res.confirm) {
            await userExitLogin();
            that.logout();
            that.feedPet = {};
            that.adoptCatList = [];
            uni.switchTab({
              url: '/pages/index/index',
            });
          }
        },
      });
    },

    ttIm(detail) {
      console.log(detail);
    },
    onPullDownRefresh() {
      if (this.isLogin) {
        this.getMyCloudAdoptPet();
        this.getFeedPets();
      }
      uni.stopPullDownRefresh();
    },
    onShareAppMessage(res) {
      if (this.sharePetInfo.petId) {
        return {
          title: `${this.sharePetInfo.petName}被云认养啦，每天看ta的动态，不焦虑了！`,
          desc: `${this.sharePetInfo.petName}被云认养啦，每天看ta的动态，不焦虑了！`,
          path: `/pages/detail/index?id=${this.sharePetInfo.petId}`,
          imageUrl: this.sharePetInfo.petAvatar,
        };
      }
    },
  },
};
</script>
<style lang="scss">
button::after {
  border: none;
}
.mine-wrapper {
  min-height: 100vh;
  padding: $padding;
  background-color: #fafafa;
  box-sizing: border-box;
  .mine-bg {
    width: 100%;
    height: 560rpx;
    top: 0;
    position: absolute;
    left: 0;
    background-image: linear-gradient(180deg, #9eff7a 0%, #fafafa 100%);
  }
  .content-bg {
    display: flex;
    position: relative;
    flex-direction: column;
    z-index: 1;
  }
  .exit-button {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx 0;
    margin-top: 24rpx;
    text-align: center;
    font-weight: 400;
    font-size: 28rpx;
  }
}
</style>
